<template>
  <div id="app">
    <transition name='tabani'>
      <tabbar style="position:fixed;" v-show="isShowTab">
        <!-- selected: 默认选项,有高亮效果 -->
        <tabbar-item selected link='/'>
          <img slot="icon" src="../static/1.png">
          <span slot="label">外卖</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="../static/2.png">
          <span slot="label">发现</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="../static/3.png">
          <span slot="label">订单</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="../static/4.png">
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
    </transition>

    <transition :name='Animate'>
      <!--<keep-alive>-->
        <router-view></router-view>
      <!--</keep-alive>-->
    </transition>
  
    <!--<router-view></router-view>-->
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'

export default {
  components: {
    Tabbar,
    TabbarItem
  },
  // name:'app'
  data() {
    return {
      Animate: '',
      isShowTab: true
    }
  },
  mounted: function () {
    // 判断是否显示底部导航条
    //		console.log(this.$route);
    if (this.$route.path.split("/").length > 1) {
      this.isShowTab = false;
    } else {
      this.isShowTab = true;
    }
  },
  watch: {
    $route: function (to, from) {
      var toNum = to.path.split("/").length;
      var fromNum = from.path.split("/").length;
      if (toNum == fromNum) {
        //平级切换
        console.log('评级切换')
        this.Animate = "qqq";
      } else if (toNum > fromNum) {
        //进入
        console.log('进入动画')
        this.Animate = "routein";
      } else {
        //退出
        console.log('退出动画')
        this.Animate = "routeout";
      }
      // 判断是否显示底部导航条
      if (toNum > 1) {
        this.iisShowTab = false;
      } else {
        this.isShowTab = true;
      }
    }
  }
}
</script>

<style scoped>
/*进入动画*/

.routein-enter-active {
  z-index: 10;
}

.routein-enter-active,
.routein-leave-active {
  transition: all 0.3s;
  position: absolute;
}

.routein-enter {
  transform: translateX(100%);
}

.routein-leave-active {
  transform: translateX(-50%);
}


/*退出动画*/

.routeout-enter-active,
.routeout-leave-active {
  transition: all 0.3s;
  position: absolute;
}

.routeout-enter {
  transform: translateX(-50%);
}

.routeout-leave-active {
  transform: translateX(100%);
  z-index: 10;
}


/*tab动画*/

.tabani-enter-active,
.tabani-leave-active {
  transition: all 0.3s;
}

.tabani-enter,
.tabani-leave-active {
  transform: translateY(100%);
}


.qqq-enter-active,
.qqq-leave-active {
  position: absolute;
}

.qqq-enter {
  position: absolute;
}
</style>
